<div>
    <div class="main-colors" style="display: none">
        <div class="color-definitions">
            <div class="axis"></div>
            <div class="axisText"></div>
            <div class="gaps"></div>
            <div class="trackBackground"></div>
            <div class="trackNameBg"></div>
            <div class="trackNameFg"></div>
            <div class="openedTrackArrow"></div>
            <div class="closedTrackArrow"></div>
            <div class="text"></div>
        </div>
    </div>
    <div class="event-colors" style="display: none">
        <div class="color-definitions">
            <div class="compression" data-property="Compression">
                <div class="low"></div>
                <div class="high"></div>
            </div>
            <div class="dataFlush" data-property="DataFlush">
                <div class="low"></div>
                <div class="high"></div>
            </div>
            <div class="dataSync" data-property="DataSync">
                <div class="low"></div>
                <div class="high"></div>
            </div>
            <div class="journalWrite" data-property="JournalWrite">
                <div class="low"></div>
                <div class="high"></div>
            </div>
        </div>
    </div>
    <div class="flex-vertical absolute-fill">
        <div class="flex-horizontal margin-bottom margin-bottom-sm">
            <div class="form-inline">
                <span data-bind="visible: supportsIndexes">
                    <input type="text" accesskey="/" class="form-control" placeholder="Filter indexes" title="Filter Indexes (Alt+/)" data-bind="textInput: searchText, enable: hasIndexes" />
                    <button class="btn btn-default" data-bind="click: expandIndexes, enable: indexesVisible, visible: !isIndexesExpanded()" title="Expand indexes IO stats details"><i class="icon-expand"></i> <span>Expand</span></button>
                    <button class="btn btn-default" data-bind="click: collapseIndexes, enable: indexesVisible, visible: isIndexesExpanded" title="Collapse indexes IO stats details"><i class="icon-collapse"></i> <span>Collapse</span></button>
                </span>
                <button class="btn btn-default" data-bind="click: exportAsJson, enable: hasAnyData, visible: !isImport()" title="Export current IO stats graph to a file">
                    <i class="icon-export"></i><span>Export</span>
                </button>
                <label for="importFilePicker" class="btn btn-default">
                    <i class="icon-import"></i><span>Import</span>
                </label>
                <span class="input-group file-input" title="Import IO stats graph file">
                    <input type="file" id="importFilePicker" data-bind="event: { change: _.partial(fileSelected, $element) }" tabindex="-1" accept=".json" style="width: 10px">
                </span>
            </div>
            <div class="flex-separator"></div>
            <div data-bind="visible: hasAnyData, if: hasAnyData">
                <div id="IOMetricsLegend">
                    <div class="legend-container" data-bind="template: { name: 'legend-template', data: { type: 'Compression', text: 'Compression' }}">
                    </div>
                    <div class="legend-container" data-bind="template: { name: 'legend-template', data: { type: 'JournalWrite', text: 'Journal Write' }}">
                    </div>
                    <div class="legend-container" data-bind="template: { name: 'legend-template', data: { type: 'DataFlush', text: 'Data Flush' }}">
                    </div>
                    <div class="legend-container" data-bind="template: { name: 'legend-template', data: { type: 'DataSync', text: 'Data Sync' }}">
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-horizontal flex-shrink-0">
            <div data-bind="visible: liveViewClient() && !bufferIsFull()">
                <small>Data buffer usage: <span data-bind="text: bufferUsage() + '%'"></span></small>
            </div>
            <div data-bind="visible: bufferIsFull">
                <small>Data buffer is full, clear graph data to continue</small>
            </div>
            <div class="flex-separator"></div>
            <button class="btn btn-default btn-sm margin-right margin-right-sm" data-bind="click: clearBrush, visible: clearSelectionVisible">
                <span>Clear selection</span>
            </button>
            <button class="btn btn-sm btn-default" data-bind="click: closeImport, visible: isImport" title="Return to currently selected IO stats graph">
                <i class="icon-cancel"></i><span data-bind="text: 'Close import (' + importFileName() + ')'">Close import</span>
            </button>
            <div class="btn-group" data-bind="visible: !isImport()">
                <button class="btn btn-sm btn-info btn-checkable" data-bind="click: toggleScroll, css: { active: autoScroll }">
                    <i class="icon-logs"></i> <span>Monitoring (tail -f)</span>
                </button>
                <button class="btn btn-sm btn-danger" data-bind="click: clearGraphWithConfirm">
                    <i class="icon-cancel"></i><span>Clear graph</span>
                </button>
            </div>
        </div>
        <div class="flex-grow dynamic-container">
            <div class="row" data-bind="visible: !hasAnyData()">
                <div class="col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
                    <div data-bind="visible: !loading()">
                        <i class="icon-xl icon-empty-set text-muted"></i>
                        <h2 class="text-center text-muted">No data.</h2>
                    </div>
                    <div data-bind="visible: loading()">
                        <i class="icon-xl global-spinner text-muted"></i>
                        <h2 class="text-center text-muted on-base-background">Loading ...</h2>
                    </div>
                </div>
            </div>
            <div id="ioStats" style="position: relative" data-bind="visible: hasAnyData">
                <section class="metricsContainer" id="IOMetricsContainer">
                    <div class="tooltip tooltip-inner" style="opacity: 0; display: none">
                    </div>
                </section>
            </div>
        </div>
        <div class="results-error" data-bind="visible: !isConnectedToWebSocket() && !isImport()">
            <div class="help-block bg-warning text-warning">
                <span><i class="btn-spinner"></i><span class="margin-left">Trying to Connect</span></span>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="legend-template">
    <div class="legend-start-range">0</div>
    <div class="arrow-down" data-bind="style: { left: $parent.itemSizePositions.get(type)}, visible: $parent.itemHovered.get(type)"></div>
    <div class="legend-end-range" data-bind="text: $parent.computedItemValue($parent.legends.get(type))"></div>
    <img data-bind="attr: { src: $parent.legends.get(type)().imageStr }" />
    <div class="legend-title" data-bind="text: text"></div>
</script>
